<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <button @click="fn1" class="btn btn-warning">-6</button>
    <button @click="fn2" class="btn btn-warning">-3</button>
    <button @click="fn3" class="btn btn-warning">+1</button>
    <button @click="fn4" class="btn btn-warning">调用actions</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Right',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // addCount (num) {
    //   this.$store.commit('addCount', num)
    // },
    // countPlusPlus (num) {
    //   this.$store.commit('countPlusPlus', num)
    // },
    // 下面这句话相当于上面的函数
    ...mapMutations(['addCount','countPlusPlus']),
    ...mapActions(['updateCount']),
    fn1 () {
      this.addCount(-6)
    },
    fn2 () {
      this.addCount(-3)
    },

    fn3 () {
      this.countPlusPlus()
    },

    fn4 () {
      this.updateCount(555)
    }
  }
}
</script>

<style>
</style>
